<template>
  <div class="data-analysis">
    <!-- 今日数据 -->
    <h3 class="data-title">今日数据</h3>
    <div class="totay-data">
      <div class="totay-data-item">
        <p class="item-title">发朋友圈数</p>
        <p class="item-content" v-text="todayData.circleSize || 0"></p>
      </div>
      <div class="totay-data-item">
        <p class="item-title">被点赞数</p>
        <p class="item-content" v-text="todayData.circleLikeSize || 0"></p>
      </div>
      <div class="totay-data-item">
        <p class="item-title">被评论数</p>
        <p class="item-content" v-text="todayData.circleCommentSize || 0"></p>
      </div>
      <div class="totay-data-item">
        <p class="item-title">好友总数(不去重)</p>
        <p class="item-content" v-text="todayData.friendSize || 0"></p>
      </div>
      <div class="totay-data-item">
        <p class="item-title">好友总数(去重)</p>
        <p class="item-content" v-text="todayData.friendDistSize || 0"></p>
      </div>
    </div>

    <!-- 数据筛选 -->
    <h3 class="data-title">数据筛选</h3>
    <div class="filter-container">
      <!-- 设置时间段 -->
      <el-date-picker
        v-model="timePick"
        size="small"
        type="datetimerange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>

      <!-- 时间维度 -->
      <el-select v-model="queryType" style="margin-left: 10px; width: 200px" size="small" placeholder="按天" clearable>
        <el-option v-for="ts in typeStates" :key="ts.label" :label="ts.label" :value="ts.value" />
      </el-select>

      <!-- 所有分组 -->
      <el-select
        v-model="groupId"
        style="margin-left: 10px; width: 200px"
        size="small"
        clearable
        placeholder="请选择分组"
      >
        <el-option v-for="item in groupsList" :key="item.id" :label="item.name" :value="item.id"></el-option>
      </el-select>

      <!-- 设置个人号 -->
      <el-select
        v-model.trim="username"
        size="small"
        placeholder="全部个人号"
        style="margin-left: 10px; width: 200px"
        clearable
      >
        <el-option v-for="item in wechats" :key="item.wechatid" :label="item.wechatnick" :value="item.wechatid" />
      </el-select>

      <el-button size="small" style="margin-left: 10px" type="primary" icon="el-icon-search" @click="getFriendData">
        查询
      </el-button>
    </div>

    <div class="friend-data">
      <!-- 数据展示 -->
      <el-table
        :key="tableKey"
        :data="friendDataList"
        border
        fit
        highlight-current-row
        style="width: 100%"
        max-height="100%"
        :default-sort="{ prop: 'snumber', order: 'ascending' }"
      >
        <el-table-column prop="snumber" label="序号" sortable align="center" width="200"></el-table-column>
        <el-table-column prop="nickname" label="微信昵称" align="center"></el-table-column>
        <el-table-column prop="time" label="时间" align="center"></el-table-column>
        <el-table-column prop="count" label="数量" align="center"></el-table-column>
        <el-table-column prop="count0" label="主动添加" align="center"></el-table-column>
        <el-table-column prop="count1" label="被动添加" align="center"></el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <!-- <Pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNo"
      :limit.sync="pageSize"
      @pagination="getFriendData"
    /> -->
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'

import { friendData, circleData } from '@/api/front/data'
import { getAllDeviceGroup } from '@/api/admin/group'
import { getAllDevices } from '@/api/admin/device'

// import Pagination from '@/components/Pagination' // 基于el-pagination组件封装的分页主键

export default {
  name: 'DataAnalysis',
  // components: { Pagination },
  data() {
    return {
      // 今日数据
      todayData: {
        circleCommentSize: 0,
        circleLikeSize: 0,
        circleSize: 0,
        friendDistSize: 0,
        friendSize: 0
      },
      wechats: [],
      username: '', // 微信id
      groupId: '', // 微信id
      groupsList: [], // 账号分组列表

      queryType: 1,
      typeStates: [
        {
          label: '按天',
          value: 1
        },
        {
          label: '按时间',
          value: 2
        }
      ],

      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      timePick: '', // 时间段

      friendDataList: [], // 表格中的数据

      // total: 0, // 数据总数
      // pageNo: 1, // 页
      // pageSize: 20, // 页面大小

      tableKey: 0 // 表的key 改变可以重新渲染表
    }
  },
  computed: {
    ...mapGetters({
      currentUser: 'currentUser'
    })
  },
  created() {
    this.getCircleData()
    // 获取所有的分组
    getAllDeviceGroup(this.currentUser.SupplierId).then((res) => {
      this.groupsList = res.data || []
    })
    // 获取所有设备
    getAllDevices(this.currentUser.SupplierId, this.currentUser.UnionId).then((res) => {
      this.wechats = res?.data || []
    })
  },
  methods: {
    // 获取今日信息
    getCircleData() {
      this.todayData = []
      circleData(this.currentUser.SupplierId).then((res) => {
        if (res.code === 0 && res.data) {
          this.todayData = res.data
        }
      })
    },
    // 获取加好友统计信息
    getFriendData() {
      this.friendDataList = []

      let startTime = ''
      let endTime = ''
      if (this.timePick) {
        startTime = dayjs(this.timePick[0]).format('YYYY-MM-DD HH:mm:ss')
        endTime = dayjs(this.timePick[1]).format('YYYY-MM-DD HH:mm:ss')
      }
      if (!startTime || !endTime) {
        this.$message.warning('请先设置时间段！')
        return
      }
      friendData(this.currentUser.SupplierId, this.queryType, startTime, endTime, this.username, this.groupId).then(
        (res) => {
          if (res.code === 0 && res.data) {
            // const reg = /\d+/
            // const resData = res.data.sort((a, b) => {
            //   return a.nickname.match(reg) - b.nickname.match(reg)
            // })
            this.friendDataList = res.data
            // if (this.queryType === 1) {
            // } else {
            //   const timeDataList = []
            //   const timeDataMap = {}
            //   resData.forEach((x) => {
            //     if (timeDataMap[x.wechatid]) {
            //       timeDataMap[x.wechatid].push(x)
            //     } else {
            //       timeDataMap[x.wechatid] = [x]
            //     }
            //   })
            //   for (const key in timeDataMap) {
            //     if (Object.hasOwnProperty.call(timeDataMap, key)) {
            //       const wechatData = timeDataMap[key]
            //       const newData = {
            //         wechatid: key,
            //         nickname: wechatData[0] ? wechatData[0].nickname : ''
            //       }

            //       for (let index = 0; index < wechatData.length; index++) {
            //         newData[wechatData[index].time] = wechatData[index].count
            //       }
            //       timeDataList.push(newData)
            //     }
            //   }
            //   console.log(timeDataList)
            //   this.timeDataList = timeDataList
            // }
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.data-analysis {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .data-title {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .totay-data {
    display: flex;
    margin: 10px 20px;
    flex-wrap: wrap;
    .totay-data-item {
      margin-right: 20px;
      .item-title {
        color: #c8c9cf;
        height: 30px;
        display: flex;
        align-items: center;
      }
      .item-content {
        height: 40px;
        font-size: 20px;
        font-weight: 600;
        display: flex;
        align-items: center;
      }
    }
  }

  .filter-container {
    margin: 10px 20px;
    line-height: 40px;
  }
  .friend-data {
    margin: 10px 20px;
    flex: 1 1 auto;
    overflow: hidden;
  }
}
</style>
